<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="renderer" content="webkit|ie-comp|ie-stand" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="applicable-device" content="pc,mobile">
        <title>{$eyou.field.seo_title}</title>
        <meta name="description" content="{$eyou.field.seo_description}" />
        <meta name="keywords" content="{$eyou.field.seo_keywords}" />
        <link href="{eyou:global name='web_ico' /}" rel="shortcut icon" type="image/x-icon" />
        {eyou:static file="skin/css/cui.css" /}
        {eyou:static file="skin/css/lib.css" /}
        {eyou:static file="skin/css/bootstrap.css" /}
        {eyou:static file="skin/css/style.css" /}
        {eyou:static file="skin/css/less.css" /}
        {eyou:static file="skin/js/jquery.min.js" /}
        {eyou:static file="skin/js/common.js" /}
        {eyou:static file="skin/js/bootstrap.js" /}
    </head>
    <body>
        {eyou:include file="header.htm" /}

        <!-- 头部-end -->
        {eyou:include file="banner.htm" /}
        <div class="main">
            <div class="g-cur">
                <div class="wp"> {eyou:position style=' ' /} </div>
            </div>
            <div class="row-b1">
                <div class="wp">
                    {eyou:include file="left.htm" /}
                    <!-- 产品展示 -->
                    <div class="col-r">
                        <div class="g-titIns1">{$eyou.field.typename}</div>
                        <div class="m-list1">
                            <div class="m-pic1">
                                <div class="yunu-showcase clearfix">
                                    <div class="pc-slide">
                                        <div class="view">
                                            <div class="swiper-container swiper-container-horizontal">
                                                <div class="swiper-wrapper">
                                                    {eyou:volist name="$eyou.field.image_list"}
                                                    <div class="swiper-slide img-center">
                                                        <div class="imgauto"> 
                                                            <img src="{$field.image_url}" rel="{$field.image_url}" class="jqzoom" /> 
                                                        </div>
                                                    </div>
                                                    {/eyou:volist}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="preview"> <a class="arrow-left" href="javascript:;"></a> <a
                                                class="arrow-right" href="javascript:;"></a>
                                            <div class="swiper-container swiper-container-horizontal">
                                                <div class="swiper-wrapper">
                                                    {eyou:volist name="$eyou.field.image_list"}
                                                    <div class="swiper-slide">
                                                        <div class="imgauto"> 
                                                            <img src="{$field.image_url}" />
                                                        </div>
                                                    </div>
                                                    {/eyou:volist}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="m-txt1">
                                <div class="protit">{$eyou.field.title}</div>
                                <div class="txt">
                                    {eq name='$Think.cookie.home_lang' value='cn'}
                                    <p>发行日期：{$eyou.field.fxrq}</p>
                                    <p>机身颜色：{$eyou.field.yanse}</p>
                                    {/eq}
                                    <p>{$eyou.field.seo_description}</p>
                                </div>
                                <a href="javascript:;" class="btn-m"><span>{eyou:lang name='yyb29' /}</span></a>
                            </div>
                        </div>
                        <div class="m-txt2">
                           {$eyou.field.content}
                        </div>
                        <ul class="ul-pages1">
                            {eyou:prenext get='pre'}
                              <li><a href="{$field.arcurl}">{eyou:lang name='sys11' /}：{$field.title}</a></li>
                            {eyou:else /}
                              <li>{eyou:lang name='sys11' /}：{eyou:lang name='sys10' /}</li>
                            {/eyou:prenext}
                            {eyou:prenext get='next'}
                              <li><a href="{$field.arcurl}">{eyou:lang name='sys12' /}：{$field.title}</a></li>
                            {eyou:else /} 
                              <li>{eyou:lang name='sys12' /}：{eyou:lang name='sys10' /}</li>
                            {/eyou:prenext}
                        </ul>
                        <div class="g-titIns1">{eyou:lang name='yybl9' /}</div>
                        <ul class="ul-imgtxt-01 ul-imgtxt2">
                            {eyou:arclist typeid='3' row='4' flag='c'}
                            <li> 
                                <a href="{$field.arcurl}" title="{$field.title}">
                                    <div class="pic"> 
                                        <img src="{$field.litpic}" alt="{$field.title}"> 
                                    </div>
                                    <p>{$field.title}</p>
                                </a> 
                            </li>
                            {/eyou:arclist}
                        </ul>
                    </div>
                    <!-- 产品展示-end -->
                </div>
            </div>
        </div>
        {eyou:include file="footer.htm" /}
        {eyou:static file="skin/js/superslide.js" /}
        {eyou:static file="skin/js/jquery.imagezoom.min.js" /}
        <script type="text/javascript">
            $(".jqzoom").imagezoom();

            var $zoom = $('.jqzoom');
            $('.yunu-showcase-pic').slide({
                titCell: '.hd ul',
                mainCell: '.bd ul',
                autoPage: true,
                effect: 'left',
                vis: 3
            }).on('mouseenter', '.bd li', function() {
                var src = $(this).find('img').attr('src');
                $zoom.attr('src', src);
                $zoom.attr('rel', src);
                $(this).addClass('active').siblings().removeClass('active');
            }).find('li').eq(0).addClass('active');
        </script>
        <!-- 放大镜END -->
        {eyou:static file="skin/js/swiper.min.js" /}
        {eyou:static file="skin/css/swiper.min.css" /}
        <script>
            $('.preview .swiper-slide').eq(0).addClass('active-nav');
            var viewSwiper = new Swiper('.view .swiper-container', {
                onSlideChangeStart: function() {
                    updateNavPosition()
                }
            })

            $('.view .arrow-left,.preview .arrow-left').on('click', function(e) {
                e.preventDefault()
                if (viewSwiper.activeIndex == 0) {
                    viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000);
                    return
                }
                viewSwiper.slidePrev()
            })
            $('.view .arrow-right,.preview .arrow-right').on('click', function(e) {
                e.preventDefault()
                if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
                    viewSwiper.slideTo(0, 1000);
                    return
                }
                viewSwiper.slideNext()
            })

            var previewSwiper = new Swiper('.preview .swiper-container', {
                //visibilityFullFit: true,
                slidesPerView: 'auto',
                allowTouchMove: false,
                onTap: function() {
                    viewSwiper.slideTo(previewSwiper.clickedIndex)
                }
            })

            function updateNavPosition() {
                $('.preview .active-nav').removeClass('active-nav')
                var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
                if (!activeNav.hasClass('swiper-slide-visible')) {
                    if (activeNav.index() > previewSwiper.activeIndex) {
                        var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
                        previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
                    } else {
                        previewSwiper.slideTo(activeNav.index())
                    }
                }
            }
        </script>
        <div id="message">
            <div class="messagebg"></div>
            <div class="m-content">
                <div class="m-message">
                    {eyou:guestbookform type='default' typeid='70'}
                    <form method="POST" {$field.formhidden} action="{$field.action}" onsubmit="return checkForm();">
                        <label style="display: none;"> <span>{$field.itemname_26}：</span>
                            <input class="inp" type="text" id='attr_26' name='{$field.attr_26}' value="{$eyou.field.title}">
                        </label>
                        <label> <span>{$field.itemname_27}：</span>
                            <input class="inp" type="text" id='attr_27' name='{$field.attr_27}' placeholder="{eyou:lang name='yyb23' /} {$field.itemname_27}">
                            <em>*</em></label>
                        <label> <span>{$field.itemname_28}：</span>
                            <input class="inp" type="text" id='attr_28' name='{$field.attr_28}' placeholder="{eyou:lang name='yyb23' /} {$field.itemname_28}">
                            <em>*</em></label>
                        <label> <span>{$field.itemname_29}：</span>
                            <input class="inp" type="email" id='attr_29' name='{$field.attr_29}' placeholder="{eyou:lang name='yyb23' /} {$field.itemname_29}">
                            <em>*</em></label>
                        <label> <span>{$field.itemname_30}：</span>
                            <input class="inp" type="text" id='attr_30' name='{$field.attr_30}' placeholder="{eyou:lang name='yyb23' /} {$field.itemname_30}">
                        </label>
                        <label class="mes"> <span>{$field.itemname_31}：</span>
                            <textarea id='attr_31' name='{$field.attr_31}'></textarea>
                        </label>
                        <div class="btn-1">
                            <input class="focus" type="submit" value="{eyou:lang name='yyb24' /}">
                            <input type="reset" value="{eyou:lang name='yyb25' /}">
                        </div>
                    {$field.hidden}
                    </form>
                    {/eyou:guestbookform}
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var inptext = $('.protit').html();
            $('.btn-m').click(function() {
                $('#message').css({
                    "transform": "scale(1)",
                    "transition": ".5s"
                });
                $('.protitle').val(inptext);
            })
            $('.messagebg').click(function() {
                $('#message').css({
                    "transform": "scale(0)",
                    "transition": ".5s"
                });
            })
        </script>
    </body>
</html>
